<template>
  <div>
    <template>
      <div slot="header" class="clearfix" style="text-align: center;line-height: 30px">
        <h3>用户冻结审核</h3>
      </div>

      <el-table
          :data="userAudit"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="usercode"
            label="用户编号">
        </el-table-column>
        <el-table-column
            prop="uaername"
            label="用户名">
        </el-table-column>
        <el-table-column
            prop="realname"
            label="真实姓名">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="审核状态">
          <span>待审核</span>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="审核通过">
          <template slot-scope="scope">
            <el-button @click="passAudit(scope.row)" type="button" size="small">通过</el-button>
          </template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="审核不通过">
          <template slot-scope="scope">
            <el-button @click="noPassAudit(scope.row)" type="button" size="small">不通过</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: "userFreezeWebSocket",
  data(){
    return{
      userAudit:[],
      messageget:'',
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.load()
      if (typeof (WebSocket) == 'undefined'){
        console.log("你的浏览器不支持websocket")
      }else{
        console.log("你的浏览器支持websocket")
        let socketUrl = 'ws://127.0.0.1:8200/userFreezeWebSocket' //这里是使用ws协议, 不再是http协议
        //开启一个websocket服务
        let webSocket = new WebSocket(socketUrl)
        //打开事件--> 建立websocket连接
        webSocket.onopen =  function(){
          console.log("websocket已建立连接")
        }
        //将当前demo赋值给that变量 --> 在websocket调用的方法中使用的this是代表的websocket对象, 并不是代表当前界面的demo,会出现data中的数据赋值失败的问题
        let that = this
        //浏览器接收服务器通过websocket推送过来的消息, 属性设置为msg
        webSocket.onmessage = function (msg){
          that.messageget = msg.data  //这里使用that来调用data中的变量
          that.userAudit = JSON.parse(that.messageget)
          that.$message.success("您有新的消息待审核, 请注意查收")
        }
        //关闭事件
        // webSocket.onclose = function () {
        //   console.log("websocket已关闭");
        // };
        //发生了错误事件
        webSocket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }
    },
    load(){
      let url = '/csc/frontUser2/selelctAllFreeze'
      this.$axios.get(url).then(r=>{
        this.userAudit = r.data
      })
    },
    passAudit(row){
      console.log(row)
      this.$confirm('确定冻结用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = '/csc/frontUser2/passAuditFreeze'
        let fd = new FormData
        fd.append("clientId",row.userid)
        fd.append("clientNum",row.usercode)
        fd.append("state",2)
        fd.append("audiState",4)
        this.$axios.post(url,fd).then(r=>{
          this.$message.success(r.data)
          this.load()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    noPassAudit(row){
      let url = '/csc/frontUser2/noPassAuditFreeze'
      let fd = new FormData
      fd.append("clientId",row.userid)
      fd.append("clientNum",row.usercode)
      fd.append("state",0)
      fd.append("audiState",5)
      this.$axios.post(url,fd).then(r=>{
        this.$message.success(r.data)
        this.load()
      })
    },
  }
}
</script>

<style scoped>

</style>